import React, { ReactNode } from 'react';

import cn from 'classnames';
import { useWindowSize } from 'usehooks-ts';

import s from './Overlay.module.scss';

type Props = {
  onClick?: () => void;
  children?: ReactNode;
  isStart?: boolean;
  isHidden?: boolean;
};

export const Overlay = ({ onClick, children, isStart, isHidden }: Props) => {
  const { width } = useWindowSize();

  const overlayClassName = (width > 1024 && (isStart ? s.fadeStart : s.fade)) || '';

  if (isHidden) {
    return <></>;
  }

  return (
    <div className={cn(overlayClassName)} onClick={onClick}>
      {children}
    </div>
  );
};
